<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>placeOrder</title>
	<!-- 引入swiper -->
	<link rel="stylesheet" href="js/swiper-2.7.6/swiper.min.css">
	<!-- 引入字体图标 -->
	<link rel="stylesheet" type="text/css" href="js/font-awesome/css/font-awesome.css" />
	<!-- Bootstrap -->
	<link href="js/bootstrap/bootstrap.min.css" rel="stylesheet">
	<!-- 引入全局配置 -->
	<link rel="stylesheet" type="text/css" href="css/start.css">

	<!--引入公共样式-->
	<!-- <link rel="stylesheet" type="text/css" href="css/common.css" /> -->
	<link rel="stylesheet" type="text/css" href="css/homepage.css">
</head>

<body class="placeOrder">
  <!-- 头部开始 -->
<div id="header">
  <div class="top">
    <div class="top-left">
      <i class="fa fa-map-marker "></i>
      <a href="javascript:void(0)" class="one">广州</a>
      <a href="javascript:void(0)" class="two">切换城市</a>
    </div>
    <div class="top-right">
      <a class="one">
        <i class="fa fa-user"></i> 朱莉
      </a>
      <a href="javascript:void(0)">退出</a>
      <a href="javascript:void(0)">帮助中心</a>
      <a href="javascript:void(0)">网站导航</a>
      <a href="javascript:void(0)">手机APP</a>
    </div>

  </div>
  <div class="searchBox">
    <div class="search">
      <div class="search-left">
        <h3>互生 <small>商务服务</small></h3>
      </div>
      <div class="search-right">
        <div class="one">
          <input type="text" name="search" id="search" value="输入商家名称、分类或地区" placeholder="输入商家名称、分类或地区" />
          <a href="javascript:void(0)">
            <i class="fa fa-search"></i>
          </a>
        </div>

        <div class="two">
          <a href="#">运动健身</a>
          <a href="#">瑜伽</a>
          <a href="#">羽毛球</a>
          <a href="#">CS</a>
          <a href="#">农家乐</a>
          <a href="#">私人影院</a>
        </div>
      </div>

    </div>

  </div>

</div>
<!-- 头部结束 -->
<div class="container">
  <div class="title">
       服务项目
  </div>
  <div class="product">
    <div class="pic">
      <img src="img/2.png" alt="">
    </div>
    <div class="right">
      <div class="name">
        PC健身一日课程
      </div>
      <div class="icon">
        <div class="iconBox">
         <img src="img/jinbi.png" alt="">
         18.8
        </div>
        <div class="iconBox" style="color:#1769a8;margin-left:10px;">
         <img src="img/integral.png" alt="">
        400
        </div>
      </div>
    </div>
  </div>
  <div class="productDet">
		<div class="name">
			<span style="font-weight:bold;">PBC健身工作室</span> <span style="color:#a1a1a1;">(06 876 00 0001) </span>
		</div>
		<div class="adress">
			黄埔大道西668号跑马场内(新天地百货旁)
		<span style="color:#1c7bd4;margin-left:10px;">	<i class="fa fa-map-marker"></i>查看地图</span>
		</div>

  </div>
	<div class="title">
			 预约服务人员
			 <span style="color:#f93c27;font-size:12px;margin-left:15px;font-weight:normal;">
       重要提示:服务人员不能提供服务时,可协商变更
			 </span>
	</div>
	<div class="bookPerson">
		<div class="head">
			<img src="img/2.png" alt="">
			<p>陈和合</p>
		</div>
	</div>
	<div class="bookInfo">
   <div class="booktitle">
   	填写预约信息
   </div>
	 <table>
	 	<tr>
	 		<td>预约到店时间:</td>
			<td>
				<select class="form-control ml15 w350">
				  <option selected>选择预计到店时间</option>
				  <option>2</option>
				  <option>3</option>
				  <option>4</option>
				  <option>5</option>
				</select>
			</td>
	 	</tr>
		<tr>
		<td>预约联系人:</td>
		<td>
			<input type="text" class="form-control ml15 w350" placeholder="填写联系人姓名">
		</td>
	</tr>
	<tr>
	<td>预留手机号:</td>
	<td>
		<input type="text" class="form-control ml15 w350" placeholder="填写联系人手机号">
	</td>
</tr>
<tr>
<td>预计到店人数:</td>
<td>
	<div class="btnC">
 	<button class="btn btn-default" type="submit">
 		<i class="fa fa-minus"></i>
 	</button>
 <input type="text" class="form-control" value="2" placeholder="2">
 	<button class="btn btn-default" type="submit">
 				<i class="fa fa-plus"></i>
 	</button>
  </div>
</td>
</tr>
	 </table>
	 <div class="btnBox">
	 	<button class="btn btn-danger book">免费预约</button>
	 </div>
	</div>
</div>

<!--**********底部开始**********-->
<div class="foot" id="foot">
<p>
  <strong>客服热线： </strong>
  <a href="javascript:void(0)">
    0755-83344111
  </a>
  <span class="foot-adition">2013-2018 </span>
  <span>
      深圳市互生电子商务有限公司
    </span>
  <span>
      粤ICP备案号14100052号
    </span>
</p>
</div>
  <!--**********底部结束**********-->
</body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/common/jquery-1.12.2.js"></script>

<!-- 引入swiper插件 -->
<script type="text/javascript" src="js/swiper-2.7.6/swiper.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- 让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<script type="text/javascript" src="js/common/respond.min.js"></script>
<script type="text/javascript" src="js/common/html5.min.js"></script>
<script type="text/javascript" src="js/common/common.js"></script>
<script type="text/javascript">
  var mySwiper = new Swiper('.swiper-container', {
    swipeToNext: true,
    pagination : '.pagination',
    paginationClickable: true,
    autoplay: 5000, //可选选项，自动滑动
    loop: true, //可选选项，开启循环

  })
  $('#prve').click(function(){
  mySwiper.swipePrev();
  })
  $('#next').click(function(){
  mySwiper.swipeNext();
})
</script>




</html>
